import React, { PureComponent } from 'react';
import { Row, Col, Empty, Spin } from 'antd';
import BaseTable, { AutoResizer } from './src/index';
import './src/styles.less';
import styles from './index.less';
import _ from 'lodash';

export default class SelectEditor extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      subtractHeight: this.props.subtractHeight,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({
      subtractHeight: nextProps.subtractHeight,
    });
  }

  render() {
    const {
      treeData,
      fixHeight,
      fixedColumns,
      loading,
      onRowExpand,
      onExpandedRowsChange,
    } = this.props;
    const { subtractHeight } = this.state;
    const containerheight = fixHeight || `calc(100vh - ${subtractHeight || '260px'})`;
    return (
      <Spin spinning={loading === undefined ? false : loading}>
        <div
          style={{
            width: '100%',
            position: 'relative',
            margin: 0,
            marginTop: 10,
            padding: 0,
            height: containerheight,
          }}
        >
          <AutoResizer>
            {({ width, height }) => (
              <BaseTable
                width={width}
                height={fixHeight || height}
                className={styles.baseTableStyle}
                fixed
                columns={fixedColumns}
                data={treeData}
                rowHeight={36}
                headerHeight={35}
                onRowExpand={
                  onRowExpand ||
                  (columns => {
                    console.log(columns);
                  })
                }
                onExpandedRowsChange={
                  onExpandedRowsChange ||
                  (columns => {
                    console.log(columns);
                  })
                }
                emptyRenderer={
                  <Row align="middle" style={{ height: '100%' }} justify="center" type="flex">
                    <Col span={24}>
                      <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
                    </Col>
                  </Row>
                }
                // components={{ TableCell: EditableCell, TableHeaderCell }}
                // expandColumnKey={expandColumnKey}
                {...this.props}
              />
            )}
          </AutoResizer>
        </div>
      </Spin>
    );
  }
}
